<%@ page import="java.util.List" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>回购网</title>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
    <script type="text/javascript" src="js/echarts.js" ></script>

    <link rel="stylesheet" href="css/shouji2.css" />
    <script type="text/javascript" src="js/shouji.js" ></script>

</head>

<body>
<div id="row1" class="row">
    <div id="row1_1" >
        <div id="row1_2">
            <img id="row1_4" src="img/hello.jpg" style="display: none;position: absolute;left: 180px;top:35px;"/>

            <div class="row1_5" >
                <img src="img/shortcut_icon1.png" />&nbsp;
                <span >手机逛回购</span>
            </div>
            &nbsp;&nbsp;<span>|</span>&nbsp;
            <div>
                <img src="img/shortcut_icon2.png"/>&nbsp;
                <span>
								当前：
								<span>
									深圳&nbsp;<span class="change">[切换城市]</span>
								</span>
							</span>
            </div>
        </div>


        <div id="row1_3">
            <span class="change">登录</span>&nbsp;<span>|</span>&nbsp;
            <span class="change">注册</span>&nbsp;<span>|</span>&nbsp;
            <span class="change">网站导航</span>&nbsp;<span>|</span>
        </div>

    </div>
</div>


<div id="row2">

    <div id="row2_1">
        <img src="img/logos.png"/>
    </div>

    <div id="row2_2">
        <font class="change">闲置回收</font>
    </div>

    <div id="row2_3">
        <font class="change">旧机换新</font>
        <img src="img/new.png" />
    </div>
    <div id="row2_4">
        <font class="change">靓机优选</font>
    </div>

    <div id="row2_5" style="margin-top: 25px;">
        <img src="img/kc.gif" />
    </div>

</div>


<div id="row3">
    <img id="show_search" src="img/search_btn.png" style="height: 90px; width: 45px;position: absolute;left: 140px;cursor: pointer;"/>
    <div id="search" style="display: none;">
        <div id="search_01">
            <div id="search_02">
                <h1 style="font-weight: normal;color: gray;font-size: 28px;">搜一下，看看你的二手闲置还值多少钱</h1>
            </div>

            <div id="search_03">
                <div id="search_04" style="width: 150px;border-right: solid gainsboro 1px;">
                    <img style="margin-top: 20px;margin-left: 20px;margin-bottom: 20px;" src="img/search_icon1.gif" />
                    <span style="font-size: 15px;color: gray; margin-top: 10px;margin-bottom: 10px;margin-left:5px;padding-top: 12px;">全部分类</span>
                    <img src="img/search_icon2.gif" style="margin-bottom: 28px;margin-left:2px;margin-top: 28px;"/>
                </div>
                <div style="display: flex;">
                    <input id="search_07" type="text"  placeholder="请输入品牌型号搜索"/>
                    <img class="go_search" style="cursor:pointer;margin-bottom: 12px;margin-top: 12px;margin-left: 4px;" src="img/search_btn.gif" />
                </div>
            </div>
        </div>
    </div>






    <div class="price" style="height: 380px;">
        <div id="price_01"><span class="change">首页</span> > 手机  >  ${pageInfo.phone.name}</div>
        <div id="price_02" style="background-color: white;">
            <div id="price_03" style="text-align: center;">
                <img id="img_str" style="height: 150px;height: 150px;margin: 80px 60px 80px 60px;" src="${pageInfo.phone.phone_img}"/>
            </div>
            <div id="price_04">
                <div style="font-size: 24px;height: 60px;line-height: 60px;">${pageInfo.phone.name}</div>
                <dl class="heat_ts">
                    <dd style="list-style: none;">
                        <em id="highest_price">${pageInfo.phone.price/100}</em>元<br/>
                        30天内回收最高价
                    </dd>
                </dl>
                <div class="heat_bao">
                    <img src="img/icon10.gif"/>
                    <div>可免费享受第三方理赔服务</div>
                </div>
            </div>
            <div id="main" style="margin-left: 20px;width: 100%;"></div>
            <script type="text/javascript">
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    backgroundColor:'#FFF8F0',
                    title: {
                        text: '回购价格趋势'
                    },
                    tooltip: {},
                    legend: {
                        data:['单位：元']
                    },
                    xAxis: {
                        data: ["3月","4月","5月","6月","7月"]
                    },
                    yAxis: {},
                    series: [{
                        name: '单位：元',
                        type: 'line',
                        data: [1420,1500,2000,1200,1800]
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            </script>
        </div>
    </div>
</div>
<style>

</style>



<script>

</script>


<!--评估第一步-->
<div id="row4" style="width: 100%;">
    <div style="margin-left: 200px;margin-right: 200px;">
        <p class="pinggu_p">开始评估你的手机，只需3步，获得产品进准评估报价</p>
    </div>
    <div style="height: 38px;text-align: center;">
        <img style="border: 0;" src="img/step1.gif"/>
    </div>
    <div style="margin-top: 48px;margin-left: 200px;margin-right: 200px;border-bottom: dashed 2px gainsboro;margin-bottom: 40px ;">
        <div style="font-size: 20px;margin-left: 10px;">版本</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='版本'}">
                    <div class="fangkuang" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice" value="${page.price}">
                        <input type="hidden" class="price" value="0">
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>

        <div style="font-size: 20px;margin-left: 10px;">保修期</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='保修期'}">
                    <div class="fangkuang1" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice" value="${page.price}">
                        <input type="hidden" class="price" value="0">
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong1" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>

        <div style="font-size: 20px;margin-left: 10px;">机身内存</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='机身内存'}">
                    <div class="fangkuang2" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice" value="${page.price}">
                        <input type="hidden" class="price" value="0">
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong2" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>

        <script>
            $(function () {


                $('.fangkuang9').mouseover(function(){
                    $(this).addClass("changeBorderColor");
                })
                $('.fangkuang9').mouseout(function(){
                    $(this).removeClass("changeBorderColor");
                })
                $('.fangkuang9').click(function(){
                    $('.fangkuang9').removeClass("changesBorderColor");
                    $(this).addClass("changesBorderColor");
                    $(".GouZhong9").hide();
                    $(this).find(".GouZhong9").show();
                    $(this).parent().find(".price").val("0");
                    var status = $(this).find(".price").val();
                    if(status==0){
                        $(this).find(".price").val("1");
                    }else{
                        $(this).find(".price").val("0");
                    }
                })

                $('.fangkuang10').mouseover(function(){
                    $(this).addClass("changeBorderColor");
                })
                $('.fangkuang10').mouseout(function(){
                    $(this).removeClass("changeBorderColor");
                })
                $('.fangkuang10').click(function(){
                    $('.fangkuang10').removeClass("changesBorderColor");
                    $(this).addClass("changesBorderColor");
                    $(".GouZhong10").hide();
                    $(this).find(".GouZhong10").show();
                    $(this).parent().find(".price").val("0");
                    var status = $(this).find(".price").val();
                    if(status==0){
                        $(this).find(".price").val("1");
                    }else{
                        $(this).find(".price").val("0");
                    }
                })

                $('#next_3').click(function(){
                    var price = 0;
                    $(".price").each(function () {
                        var num = parseInt($(this).val());
                        if(num==1){
                            price = price + parseInt($(this).parent().find(".pagePrice").val());
                        }
                    })
                    var img = $("#img_str").prop("src");
                    var finalprice = parseInt($("#highest_price").text())-(price/100);
                    window.location.href="toHuigou3?img="+img+"&"+"finalprice="+finalprice;
                })
            })

        </script>
        <div style="font-size: 20px;margin-left: 10px;">颜色</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='颜色'}">
                    <div class="fangkuang9" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0">
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong9" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>

        <div style="font-size: 20px;margin-left: 10px;">开机情况</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 40px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='开机情况'}">
                    <div class="fangkuang10" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0">
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong10" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>
    </div>
    <div style="margin-left:600px;margin-bottom: 40px;">
        <div id="next_1" style="width: 300px;height: 60px;line-height: 60px;text-align: center;border: 1px solid orange;border-radius: 4px;color: orange;font-size: 20px;">下一步</div>
    </div>
</div>


<!--评估第二步-->
<div id="row4_1" style="width: 100%;display: none;">
    <div style="margin-left: 200px;margin-right: 200px;">
        <p class="pinggu_p">开始评估你的手机，只需3步，获得产品进准评估报价</p>
    </div>
    <div style="height: 38px;text-align: center;">
        <img style="border: 0;" src="img/step2.gif"/>
    </div>
    <div style="margin-top: 48px;margin-left: 200px;margin-right: 200px;border-bottom: dashed 2px gainsboro;margin-bottom: 40px ;">
        <div style="font-size: 20px;margin-left: 10px;">功能情况（可多选或不选）</div>
        <div style="width:100%;height: 270px;margin-bottom: 40px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='功能情况'}">
                    <div class="fangkuang3" style="margin-left: 10px;margin-top:12px;display: block;float:left">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0"/>
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong3" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 15px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>

        </div>


    </div>
    <div style="display:flex;margin-bottom: 40px;">
        <div id="prev_1" style="width: 300px;height: 60px;line-height: 60px;text-align: center;border: 1px solid darkgray;border-radius: 4px;color: darkgray;font-size: 20px;margin-left: 420px;">返回上一步</div>
        <div id="next_2" style="width: 300px;height: 60px;line-height: 60px;text-align: center;border: 1px solid orange;border-radius: 4px;color: orange;font-size: 20px;margin-left: 15px;">都没问题，跳过</div>
    </div>
</div>


<!--评估第三步-->
<div id="row4_2" style="width: 100%;display: none;">
    <div style="margin-left: 200px;margin-right: 200px;">
        <p class="pinggu_p">开始评估你的手机，只需3步，获得产品进准评估报价</p>
    </div>
    <div style="height: 38px;text-align: center;">
        <img style="border: 0;" src="img/step3.gif"/>
    </div>
    <div style="margin-top: 48px;margin-left: 200px;margin-right: 200px;border-bottom: dashed 2px gainsboro;margin-bottom: 40px ;">


        <!--外观情况-->
        <div style="font-size: 20px;margin-left: 10px;">外观情况</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='外观情况'}">
                    <div class="fangkuang4" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0"/>
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong4" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>


        <div style="font-size: 20px;margin-left: 10px;">触摸屏情况</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='触摸屏情况'}">
                    <div class="fangkuang5" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0"/>
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong5" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>



        <div style="font-size: 20px;margin-left: 10px;">显示屏情况</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='显示屏情况'}">
                    <div class="fangkuang6" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0"/>
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong6" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>




        <div style="font-size: 20px;margin-left: 10px;">维修情况</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 20px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='维修情况'}">
                    <div class="fangkuang7" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0"/>
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong7" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>




        <div style="font-size: 20px;margin-left: 10px;">配件</div>
        <div style="display: flex;width: 100%;height: 120px;margin-top: 24px;margin-bottom: 40px;">
            <c:forEach var="page" items="${pageInfo.data}">
                <c:if test="${page.tittle=='配件'}">
                    <div class="fangkuang8" style="margin-left: 10px">
                        <input type="hidden" class="pagePrice"  value="${page.price}">
                        <input type="hidden" class="price" value="0"/>
                        <div style="height:20px;margin-top: 17px;text-align: center;">${page.name}</div>
                        <div style="height:40px;text-align:center;font-size: 15px;margin-left: 10px;margin-right: 10px;margin-top: 10px;color: darkgrey">${page.detail}</div>
                        <span class="GouZhong8" style="display:none;width: 17px;height: 17px;float:right ;margin-top: 16px;">
                                <img src="img/icon7.png"/>
                            </span>
                    </div>
                </c:if>
            </c:forEach>
        </div>




    </div>
    <div style="display:flex;margin-bottom: 40px;">
        <div id="prev_2" style="width: 300px;height: 60px;line-height: 60px;text-align: center;border: 1px solid darkgray;border-radius: 4px;color: darkgray;font-size: 20px;margin-left: 420px;">返回上一步</div>
        <div id="next_3" style="width: 300px;height: 60px;line-height: 60px;text-align: center;border: 1px solid orange;border-radius: 4px;color: orange;font-size: 20px;margin-left: 15px;">查看价格></div>
    </div>
</div>


<!--底部导航栏-->
<div class="bottom">

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">关于我们</div>
        <div class="bot_first_head">关于回购网</div>
        <div class="bot_first_head">联系我们</div>
        <div class="bot_first_head">人才招聘</div>
    </div>

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">服务</div>
        <div class="bot_first_head">服务条款</div>
        <div class="bot_first_head">投诉建议</div>
        <div class="bot_first_head">网站地图</div>
    </div>

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">客服热线</div>
        <div>
            <img src="img/bot_num.png" />
        </div>

    </div>

    <div class="bot_first">
        <div class="bot_fir" style="height: 36px;line-height: 36px;color: white;border-bottom: solid 1px darkgray;">关注我们</div>
        <div style="display: flex;">
            <img src="img/xinlang.png"/>

            <img style="height: 70px;margin-top: 4px;" src="img/weixins.png"/>
        </div>
    </div>

</div>

<div style="width: 100%;color: white; text-align: center;background-color: #727272;height: 20px;line-height: 20px;font-size: 15px;">Copyright Reserved 2009-2018 @ 深圳市绿创网络科技有限公司版权所有 <span class="change">粤ICP备10071783号</span> <span class="change">站长统计</span></div>
</body>

</html>